<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>绑定value</title>
    <script src="../js/vue-dev.js"></script>
</head>
<body>


    <div id="app_value">
        <p>1、复选框</p>
        <input type="checkbox"
               v-model="words"
               id="words"
               v-bind:true-value="a"
               v-bind:false-value="b"
        >
        <label for="words">words</label>
        <p>显示的内容为(以前显示的是布尔值) : {{words}}</p>

        <br>
        <p>2、单选按钮</p>
        <input type="radio"
               v-model="family"
               v-bind:value="radioValue1"
               id="id1"
        >
        <label for="id1">id1</label>
        <input type="radio"
               v-model="family"
               v-bind:value="radioValue2"
               id="id2"
        >
        <label for="id2">id2</label>
        <input type="radio"
               v-model="family"
               v-bind:value="radioValue3"
               id="id3"
        >
        <label for="id3">id3</label>

        <p>选中后的value值为: {{family}}</p>

    </div>

    <script>
        var app_value = new Vue({
            el:'#app_value',
            data:{
                words:'',
                a:'A',
                b:'B',
                family:'',
                radioValue1:'单选框被选中后显示的值1',
                radioValue2:'单选框被选中后显示的值2',
                radioValue3:'单选框被选中后显示的值3',
            }
        })
    </script>


</body>
</html>